<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>贪吃蛇小游戏</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }

    canvas {
      background-color: #000;
      margin-top: 20px;
      border: 2px solid #333;
    }

    #score {
      font-size: 20px;
      margin-top: 10px;
    }

    #game-over {
      color: red;
      font-size: 24px;
      margin-top: 10px;
      display: none;
    }

    #controls {
      margin-top: 20px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      margin: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<h2>🐍 贪吃蛇小游戏</h2>

<div id="controls">
  <button id="startBtn">开始游戏</button>
  <button id="restartBtn" style="display: none;">重新开始</button>
</div>

<canvas id="gameCanvas" width="400" height="400"></canvas>

<div id="score">得分: 0</div>
<div id="game-over">游戏结束！</div>

<script>
  const canvas = document.getElementById("gameCanvas");
  const ctx = canvas.getContext("2d");

  const box = 20;
  let snake, food, direction, score, game;

  function initGame() {
    snake = [{ x: 9 * box, y: 9 * box }];
    food = {
      x: Math.floor(Math.random() * 20) * box,
      y: Math.floor(Math.random() * 20) * box
    };
    direction = "RIGHT";
    score = 0;
    document.getElementById("score").innerText = "得分: " + score;
    document.getElementById("game-over").style.display = "none";
    document.getElementById("restartBtn").style.display = "none";
  }

  function startGame() {
    initGame();
    if (game) clearInterval(game);
    game = setInterval(draw, 150);
  }

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 画蛇
    for (let i = 0; i < snake.length; i++) {
      ctx.fillStyle = i === 0 ? "lime" : "lightgreen";
      ctx.fillRect(snake[i].x, snake[i].y, box, box);
    }

    // 画食物
    ctx.fillStyle = "red";
    ctx.fillRect(food.x, food.y, box, box);

    let headX = snake[0].x;
    let headY = snake[0].y;

    if (direction === "LEFT") headX -= box;
    if (direction === "RIGHT") headX += box;
    if (direction === "UP") headY -= box;
    if (direction === "DOWN") headY += box;

    // 吃食物
    if (headX === food.x && headY === food.y) {
      score++;
      document.getElementById("score").innerText = "得分: " + score;
      food = {
        x: Math.floor(Math.random() * 20) * box,
        y: Math.floor(Math.random() * 20) * box
      };
    } else {
      snake.pop();
    }

    const newHead = { x: headX, y: headY };

    if (
            headX < 0 || headX >= canvas.width ||
            headY < 0 || headY >= canvas.height ||
            collision(newHead, snake)
    ) {
      clearInterval(game);
      document.getElementById("game-over").style.display = "block";
      document.getElementById("restartBtn").style.display = "inline-block";
      return;
    }

    snake.unshift(newHead);
  }

  function collision(head, array) {
    return array.some(part => head.x === part.x && head.y === part.y);
  }

  function changeDirection(e) {
    const key = e.keyCode;
    if (key === 37 && direction !== "RIGHT") direction = "LEFT";
    else if (key === 38 && direction !== "DOWN") direction = "UP";
    else if (key === 39 && direction !== "LEFT") direction = "RIGHT";
    else if (key === 40 && direction !== "UP") direction = "DOWN";
  }

  // 按钮事件绑定
  document.getElementById("startBtn").addEventListener("click", () => {
    startGame();
    document.getElementById("startBtn").style.display = "none";
  });

  document.getElementById("restartBtn").addEventListener("click", () => {
    startGame();
  });

  document.addEventListener("keydown", changeDirection);
</script>
</body>
</html>
